<template>
	<!-- 商品瀑布流 -->
	<view class="flow_main">
		<view class="lie_main">
			<view class="list_box"><circle-view class="list_box" :dataList="leftList"></circle-view></view>
			<view class="list_box"><circle-view :dataList="rightList"></circle-view></view>
			<!-- 检测图片高度专用 -->
			<view class="list_box dis_none"><circle-view ref="check_img" :dataList="dataList" :type="true" @updateItem="updateItem"></circle-view></view>
		</view>
	</view>
</template>

<script>
import circleView from './template/circle.vue';
import { configMixin } from './flowMixin.js';
export default {
	mixins: [configMixin],
	props: {
		newList: {
			type: Array,
			default: val => {
				return [];
			}
		}
	},
	components: {
		'circle-view': circleView
	},
	data() {
		return {};
	},
	watch: {
		newList: {
			handler(newVal) {
				if (newVal && newVal[0]) {
					this.noneLoadList = [];
					// 获取没有图片的项
					this.dataList = newVal.map((item, index) => {
						if (!item.img) {
							this.noneLoadList.push(index);
						} else {
							item.img = item.img.split(',')[0];
						}
						return item;
					});
					this.$nextTick(() => {
						// 获取没有图片的项的高度
						if (this.noneLoadList.length > 0) {
							this.$refs.check_img.checkNoImg(this.noneLoadList);
						}
						this.startInterval();
					});
				}
			},
			immediate: true
		}
	}
};
</script>

<style scoped lang="scss">
.flow_main {
	// 这个属性很重要，不能写到 lie_main 里，否则那个定位的list_box的宽度不一样
	padding: 10rpx 24rpx 0;
}
.lie_main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}
.list_box {
	width: calc(50% - 10rpx);
	position: relative;
}
.list_box.dis_none {
	position: absolute;
	top: -150%;
	left: -100%;
}
</style>
